<template>
<div class="wrap w-login w-change detail">
    <header>
        <img onclick="javascript :history.back(-1);" src="@/assets/img/l_b.png" alt="" />
        修改密码
    </header>
    <form action="">
        <p>您的账号目前绑定的手机号：{{number}}，请点击获取验证码进行密码修改。</p>
        <div class="group clearfix">
            <input v-model="passWord" id="password" :type="is_psd" placeholder="请输入密码(不小于6位,英文字母,数字)" />
            <img class="eye" :src="img" alt="" @click="showPsd"/>
        </div>
        <div class="group clearfix">
            <input type="text" placeholder="请输入验证码" v-model="mobileCode"/>
            <span @click.prevent="getVerifyCode" v-show="!computedTime">获取验证码
            </span>
            <span  @click.prevent v-show="computedTime">已发送({{computedTime}}s)</span> 
        </div>
        <button class="disabled" id="changePwd" v-if="disabled">重置密码</button>
        <button type="button" id="changePwd" v-else @click="reset" >重置密码</button>

    </form>

</div>  

</template>
<script>
import eye from '@/assets/img/eye.png'
import eyeOpen from '@/assets/img/eye_open.png'

export default {
  data(){
    return{

      number: '133********',  //当前手机号
      is_psd: 'password',  //密码框状态
      img: eye, //眼睛状态

        mobileCode: null, //短信验证码
        computedTime:0,// 倒计时
        userInfo: null, //获取到的用户信息
        passWord: null, //密码


      disabled: true,  //重置按钮是否禁用
      
      //眼睛图片
      eye:eye,
      eyeOpen:eyeOpen   
     }
  },  
  async created(){
       let user = await this.$axios.get('user/getUserByToken')
        if(user.code == 200){
           this.number = user.data.user_phone 
        }
    },
  
  mounted(){
            
  },
  computed: {
       
  },
  
  methods:{
     //点击眼睛 显示/隐藏密码
     showPsd() {   
        if(this.is_psd == 'password'){
            this.is_psd = 'text'
        }else{
          this.is_psd = 'password'
        }
        if(this.img == eye){
            this.img = eyeOpen
        }else{
            this.img = eye
        }
    },
    //重置按钮点击
    reset () {  
      if (new RegExp('^[a-zA-Z0-9]{6,18}$').test(this.passWord) != true) {
          this.$createDialog({
              type: 'alert',
              title: '提示',
              content: '密码格式不正确',
              icon: ''
            }).show()

      }else if(new RegExp('^[0-9]{4}$').test(this.mobileCode) != true){
          this.$createDialog({
              type: 'alert',
              title: '提示',
              content: '验证码格式不正确',
              icon: ''
            }).show()

      }else{
           this.$axios.post('/login/editPass',{
                   user_pass:this.passWord,
                   code:this.mobileCode,
                }
            ).then((res)=>{
                if(res.code  == 200){
                    this.disabled = false;
                    this.$router.push({path:'/my/my'})
                 }else{
                  this.$createDialog({
                        type: 'alert',
                        title: '提示',
                        content: res.msg,
                        icon: ''
                      }).show()
                 }
            })

      }       
    },
    //发送短信验证码
    async getVerifyCode(){
        if (new RegExp('^[a-zA-Z0-9]{6,18}$').test(this.passWord) == true) {
            this.computedTime = 60;
            this.timer = setInterval(() => {
                this.computedTime --;
                if (this.computedTime == 0) {
                    clearInterval(this.timer)
                }
            }, 1000)
            //发送短信验证码
            await this.$axios.get('/login/sendSmsCode',{
                params:{
                   phone:this.number  
                }
            }).then((res)=>{
                if(res.code  == 200){
                    this.disabled = false;
                 }else{
                  this.$createDialog({
                        type: 'alert',
                        title: '提示',
                        content: res.msg,
                        icon: ''
                      }).show()
                 }
            })
        
           }else{
            this.$createDialog({
                type: 'alert',
                title: '提示',
                content: '密码格式不正确',
                icon: ''
              }).show()
            return
            
        }
    },
    

  }

}
 </script>

 <style>
        html,body {
            height: 100%;
        }
 </style>